import React,{Component} from "react";
import {List,Grid} from 'antd-mobile'
import PropTypes from 'prop-types'

export default class HeadSelector extends Component{
    static propType ={
        setHeader:PropTypes.func.isRequired
    }
    state ={
        icon:null
    }

    //头像选择器的初始图片
    constructor(props) {
        super(props);
        this.headList = []
        for (let i = 0; i <20 ; i++) {
            this.headList.push(
                {
                    icon:require("../../assets/headers/头像"+(i+1)+".png"),
                    text:"头像"+(i+1)
                }
            )
        }
    }
    onclick =(obj,val)=>{
        console.log(obj,val)
        this.props.setHeader(obj.text)
        this.setState({icon:obj.icon})
    }
    render() {
        const {icon} = this.state
        //const listhead = "fafa"
        const listhead = (icon==null? "请选择头像" :(<div>已选头像 <img src={icon} alt=""/></div>))
        return(
            <div>
               <List renderHeader={()=>listhead}>
                   <Grid data={this.headList} columnNum={5} onClick={(obj,num)=>this.onclick(obj,num)} ></Grid>
               </List>
            </div>
        )
    }
}
